<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <!-- Meta, title, CSS, favicons, etc. -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>新增页面 </title>

  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link href="css/font-awesome.min.css" rel="stylesheet">
  <!-- NProgress -->
  <!--<link href="css/nprogress.css" rel="stylesheet">-->

  <!-- Custom Theme Style -->
  <link href="css/custom.min.css" rel="stylesheet">
</head>

<body class="nav-md">
<div class="container body">
  <div class="main_container">
    <div id="head">
    </div>

    <!-- top navigation -->

    <!-- /top navigation -->
    <!-- page content -->
    <div class="right_col" role="main">
      <div class="">
        <div class="page-title">
          <div class="title_left">
            <h3 style="color: green;">修改密码</h3>
          </div>

          <div class="title_right">
            <div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">

            </div>
          </div>
        </div>
        <div class="clearfix"></div>

        <div class="row">
          <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="x_panel">
              <div class="x_title">

                <div class="clearfix" style="text-align: center;"><span style="font-size: 25px;color: #000000;">修改密码</span></div>
              </div>
              <div class="x_content">

                <form class="form-horizontal form-label-left" novalidate>



                  <div class="item form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="pwd">原始密码 <span class="required">*</span>
                    </label>
                    <div class="col-md-4 col-sm-4 col-xs-4">
                      <input type="password" id="pwd" name="p"  class="form-control col-md-7 col-xs-12">
                    </div>
                    <label style="color: red;" id="pwdError"></label>
                  </div>
                  <div class="item form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="password1">新密码 <span class="required">*</span>
                    </label>
                    <div class="col-md-4 col-sm-4 col-xs-4">
                      <input type="password" id="password1" name="w"  class="form-control col-md-7 col-xs-12">
                    </div>
                    <label style="color: red;" id="pwd1Error"></label>
                  </div>
                  <div class="item form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12" for="rePassword">确认密码 <span class="required">*</span>
                    </label>
                    <div class="col-md-4 col-sm-4 col-xs-4">
                      <input type="password" id="rePassword" name="d"    class="form-control col-md-7 col-xs-12">
                    </div>
                    <label style="color: red;" id="rePwdError"></label>
                  </div>


                  <div class="ln_solid"></div>
                  <div class="form-group">
                    <div class="col-md-8 col-md-offset-4">
                      <button id="send" type="button" class="btn btn-success">修改</button>
                      <button type="button" class="btn btn-primary" onclick="window.history.back(-1)">返回</button>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
        <!-- /page content -->

        <!-- footer content -->

        <!-- /footer content -->
      </div>
    </div>
  </div>
</div>
</div>
</div>
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="js/fastclick.js"></script>
<!-- NProgress -->
<script src="js/nprogress.js"></script>
<!-- validator -->
<script src="js/validator.js"></script>
<script src="js/area.ui.js"></script>
<!-- Custom Theme Scripts -->

<!-- validator -->
<script>
    $(document).ready(function(){
        $("#head").load("head.html");
    });
    // initialize the validator function
    validator.message.date = 'not a real date';

    // validate a field on "blur" event, a 'select' on 'change' event & a '.reuired' classed multifield on 'keyup':
    $('form')
        .on('blur', 'input[required], input.optional, select.required', validator.checkField)
        .on('change', 'select.required', validator.checkField)
        .on('keypress', 'input[required][pattern]', validator.keypress);

    $('.multi.required').on('keyup blur', 'input', function() {
        validator.checkField.apply($(this).siblings().last()[0]);
    });

    $('form').submit(function(e) {
        e.preventDefault();
        var submit = true;

        // evaluate the form using generic validaing
        if (!validator.checkAll($(this))) {
            submit = false;
        }

        if (submit)
            this.submit();

        return false;
    });


    var $token = window.sessionStorage.getItem('token');


    // 表单验证开始
    var pPattern = /^[\w_-]{6,15}$/;
    $("#pwd").bind("blur",_password1);
    $("#password1").bind("blur",_password2);
    $("#rePassword").bind("blur",_rePassword);
    function _password1(){
        var $password = $("#pwd").val();
        if ($password == ""){
            $("#pwdError").html("密码不能为空");
            return false;
        }else if (!(pPattern.test($password))){
            $("#pwdError").html("请填写正确的密码");
            return false;
        }else {
            $("#pwdError").html("");
            return true;
        }
    }
    function _password2(){
        var $password = $("#password1").val();
        var $pwd = $("#pwd").val();
        if ($password == ""){
            $("#pwd1Error").html("新密码不能为空");
            return false;
        }else if (!(pPattern.test($password))){
            $("#pwd1Error").html("请填写正确的密码");
            return false;
        }else if (($pwd==$password)){
            $("#pwd1Error").html("两次输入密码一致");
            return false;
        }else {
            $("#pwd1Error").html("");
            return true;
        }
    }
    function _rePassword(){
        var $password = $("#password1").val();
        var $rePassword = $("#rePassword").val();
        if ($rePassword == ""){
            $("#rePwdError").html("密码不能为空");
            return false;
        }else if($rePassword != $password){
            $("#rePwdError").html("密码请输入一致");
            return false;
        }else {
            $("#rePwdError").html("");
            return true;
        }
    }
    //表单验证结束

    $(document).on("click", "#send", function () {
        if(_password1()==false){
            return false;
        }else if(_password2()==false){
            return false;
        }else if(_rePassword()==false){
            return false;
        }else {
            var $pwd = $("#pwd").val();
            var $password = $("#password1").val();
            var $rePassword = $("#rePassword").val();
            $.ajax({
                type: "post",
                xhrFields: {withCredentials: true},
                url: "http://localhost:8081/userInfo/updatepwd",
                dataType: "json",
                data: {
                    "token": $token,
                    "password": $password,
                    "pwd": $pwd
                },
                success: function (data) {
                    if (data.message == "yes") {
                        alert("修改密码成功,请重新登陆");
                        window.location.href = "login.html";
                    } else if(data.message == "nopwd"){
                        alert("原始密码错误")
                    } else {
                        alert("修改密码失败")
                    }

                },
                error: function () {
                    alert("修改密码错误");
                }
            })
        }
    })
</script>
<!-- /validator -->
</body>
</html>
